<!--关联活动——下拉表格弹窗-->
<template>
  <div>
    <!-- <div>form.videoMaterialId=={{form.videoMaterialId}}
       dataInfo==={{dataInfo.videoMaterialId}}
     </div>-->
    <!--    <div>hint===={{hint}}</div>-->

    <!--    select-cl 为input的校检红框 -->
    <ele-table-select
      :class="!form.videoMaterialId && hint.length>0 ?'select-cls':''"
      @select="selectVideo"
      @clear="selectVideo"
      ref="select"
      v-model="form.videoMaterialId"
      :clearable="true"
      placeholder="请选择创作剪辑"
      value-key="id"
      label-key="title"
      :table-config="tableConfig"
      :popper-width="600"
    >
      <!-- 角色列 -->
      <template v-slot:roles="{ row }">
        <el-tag
          v-for="item in row.roles"
          :key="item.roleId"
          size="mini"
          type="primary"
          :disable-transitions="true"
        >
          {{ item.roleName }}
        </el-tag>
      </template>
      <template v-slot:residue="{ row }">
        <div>{{ row.max - row.montageCount }}</div> <!--剩余剪辑数量-->
        <!--      <div>{{ row.montageCount }}</div>  &lt;!&ndash;已生成剪辑数量&ndash;&gt;-->
      </template>
    </ele-table-select></div>
</template>

<script>
  import {projectPage, haveProjectPage} from "@/api/creatCenter/authoringClips";
  export default {
    name: "connected-activities",
    props:{
      //  type  1:projectName 2:clipType
      dataInfo:Object,
      clipType:Number,
      hint:String
    },
    data() {
      return {
        form:{
          videoMaterialId:''
        },
        initInfo:{
          username:this.$store.state.user.info.username,
          limit:5,
          page:1
        },
        // 回显值
        initValue: undefined,
        // 表格配置
        tableConfig: {
          // datasource: [],
          datasource: ({page, limit, where, order}) => {
            console.log("进入调用接口=========",this.initInfo.type)
            // projectPage修改为haveProjectPage,查询未剪辑数量大于0的数据
            return haveProjectPage({
              ...where, ...order, page, limit, username: this.$store.state.user.info.username,
              type:this.initInfo.type ? this.initInfo.type : this.clipType
            });
          },
          columns: [
            // sortable: 'custom', 是否有升/降序
            {
              columnKey: 'index',
              type: 'index',
              width: 45,
              align: 'center',
              showOverflowTooltip: true,
              fixed: 'left'
            },
            {
              prop: 'title',
              label: '剪辑名称',
              showOverflowTooltip: true,
              minWidth: 110
            },
            {
              prop: 'projectFolderName',
              label: '关联创作',
              showOverflowTooltip: true,
              minWidth: 110
            },
            /*{
              prop: 'max',
              label: '可剪辑数量',
              showOverflowTooltip: true,
              minWidth: 80
            },*/
            // ‘剩余剪辑数量’ 修改成 ‘已生成剪辑数量’
            /*{
             slot:'residue',
             prop: 'max',
             label: '已生成剪辑数量',
             showOverflowTooltip: true,
             minWidth: 80
           }*/
            /* “剩余剪辑数量” 名称，改为 “可剪辑数量” */
            {
              slot:'residue',
              prop: 'max',
              label: '可剪辑数量',
              showOverflowTooltip: true,
              minWidth: 80
            }
          ],
          toolbar: false,
          pageSize: 5,
          pageSizes: [5, 10, 15, 20],
          size: 'small'
        },
      }
    },
    methods:{
      // 选择 视频素材
      selectVideo(e){
        console.log('选择 视频素材',e)
        if(e){
          this.form.idVideo=e.id //剪辑工程ID
          this.form.videoMaterialId=e.id //剪辑工程ID
          this.form.videoMaterial=e.title //剪辑工程名
        }
        // clear事件进入
        else{
          this.form.idVideo='' //剪辑工程ID
          this.form.videoMaterialId=''  //剪辑工程ID
          this.form.videoMaterial=''  //剪辑工程名
          // this.hint=''
        }
        this.$emit('getData', e) // 修改
      },
      // 选择类型后，重新加载数据
      init(clipType){
        //打印的是对象
        console.log("this.form====================.",this.form,'this.dataInfo',this.dataInfo)
        // id 存在代表是修改
        if(this.dataInfo.id){
          this.form.videoMaterialId=this.dataInfo.videoMaterial //剪辑工程ID  修改
          // this.form.videoMaterialId=this.dataInfo.videoMaterialId //剪辑工程ID
          this.initInfo.type=null
        }
        else {
          console.log("进入删除==========")
          this.form.videoMaterialId=null
          delete this.form.idVideo //剪辑工程ID
          delete this.form.videoMaterial //剪辑工程名
          this.initInfo.type=null
        }
        console.log("进入调用剪辑分类接口clipType=====",clipType)
        Object.assign(this.initInfo, {
          // <!-- 1 * 1脚本剪辑 =AI剪辑 * 2自定义剪辑=口播剪辑 * 3图文剪辑-->
          type:clipType
        })
        console.log('this.initInfo',this.initInfo)
        this.reload()
        /*this.$refs.select.reload({
          ...this.initInfo
          });*/
      },
      // 刷新下拉表格
      reload(where){
        this.$refs.select.reload({
          where: where,
          page: 1
        });
      },
      clear(){
        // 清空数据并‘刷新列表’
        // this.reload()
        this.form.videoMaterialId=null
        delete this.form.idVideo //剪辑工程ID
        delete this.form.videoMaterial //剪辑工程名
        this.initInfo.type=null
      }
    }
  }
</script>

<style scoped lang="less">
</style>
